<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta charset="UTF-8" />
    <title>Dashboard</title>
    <script type="text/javascript" src="../../../lib/js/require.js"></script>
    <script type="text/javascript" src="../../../lib/js/jquery.js"></script>
    <script type="text/javascript" src="../../../lib/js/validate_UI.js"></script>
    <script type="text/javascript" src="../../../lib/js/jq.js"></script>
    <script type="text/javascript" src="../../../lib/js/iscroll.js"></script>
    <script type="text/javascript" src="../../../lib/js/dove.js"></script>
    <script type="text/javascript" src="../../../lib/js/webtrends.js"></script>
    <script type="text/javascript" src="dashboard.js"></script>
    <!-- Link Roboto fonts from Google for local development,
         since Windows does not have these fonts installed.
         The below line should be removed / comment in PROD
    <link href="http://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet" type="text/css" /> -->
    <link href="../../../lib/css/uicsBase.css" rel="stylesheet" type="text/css" />
    <link href="../../../lib/css/uiGreenPacket.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- Dashboard -->
    <div id="dashboard" role="page" class="page hidden">
        <div class="bg-dashboard">
            <div class="bg-dash-sun"></div>
        </div>
        <div class="sub-dashboard">
            <div class="ui-nav-dashboard">
                <a id="btnHome" role="button" href="javascript:;" class="ui-btn-dash-home">Home</a>
                <a id="btnReceived" role="button" href="javascript:;" class="ui-btn-dash-received">Received</a>
                <a id="btnDelivered" role="button" href="javascript:;" class="ui-btn-dash-delivered select">Delivered</a>
            </div>
            <div class="ui-dashboard-content">
                <div id="summary" class="ui-dashboard-summary" align="left">

                    <!--<span>${nls.deliver}</span>-->
                </div>
                <div class="ui-dashboard-list-header">
                    <span>${nls.dateTime}</span>
                    <!--<span>${nls.Shakes}</span>-->
                    <span>${nls.LaiSees}</span>
                    <span>${nls.BigLaiSees}</span>
                </div>
                <!-- iScroll wrapper start -->
                <div id="wrapper" class="wrapper">
                    <ul id="listDashboard" class="ui-dashboard-list-items"></ul>
                </div>
                <!-- iScroll wrapper end -->
            </div>
            <!-- footer start -->
            <div class="footer dis-none" id="haveAmount_div">
                <div>
                    <span id="remainDesc" class="remainDesc">${nls.remainBalance}</span>
                    <span id="remainAmount" class="remainAmount"></span>
                </div>
                <div id="topup" class="topup hidden">
                    <span class="plusSign"></span>
                    <span class="plusDesc">${nls.TopUp}</span>
                </div>
            </div>
            <div class="footer not_haveAmount_div" id="not_haveAmount_div">
                <div class="position-overflow">
                    <span  class="remainDesc">${nls.remainBalance}</span>
                    <span  class="remainAmount" id="remainAmount_nothave"></span>
                </div>
                <div  class="topup hidden">
                    <span class="plusSign"></span>
                    <span class="plusDesc">${nls.TopUp}</span>
                </div>
                <!--<div>${nls.notHaveAmount}<br/>${nls.notHaveAmount100}</div>-->
                <div class="not-enough">
                    <div class="noBalance"></div>
                    <div class="float-left size13">${nls.notHaveAmount}<br/>${nls.notHaveAmount100}</div>
                    <div class="clear-both"></div>
                </div>
            </div>
            <div class="footer not_haveAmount100_div" id="not_haveAmount100_div">
                <div class="position-overflow">
                    <span  class="remainDesc">${nls.remainBalance}</span>
                    <span  class="remainAmount" id="remainAmount100_nothave"></span>
                </div>
                <div  class="topup hidden">
                    <span class="plusSign"></span>
                    <span class="plusDesc">${nls.TopUp}</span>
                </div>
                <!--<div>${nls.notHaveAmount100}</div>-->
                <div class="not-enough">
                    <div class="lessBalance"></div>
                    <div class="notAmount">${nls.notHaveAmount100}</div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        </div>
    </div>
</body>
</html>